<template>
  <div class="app-container">
    <el-card>
      <el-button
        @click="uploadFileDialog"
        style="background-color: rgb(188,202,213); margin-bottom: 10px"
      >点击上传
      </el-button
      >
    </el-card>

    <el-dialog title="附件管理" :visible.sync="dialogVisible" width="30%">
      <!-- 1.将<el-upload>代码添加到<el-dialog>代码块中 -->
      <el-upload
        ref="upload"
        class="upload-demo"
        :action="uploadFileURL"
        :data="loadFileParams"
        :before-upload="uploadBefore"
        :on-success="uploadSuccess"
        :headers="headers"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpload">取 消</el-button>
        <el-button type="primary" @click="ConfirmUpload"
        >确 定</el-button
        >
      </span>
    </el-dialog>


    <!--   项目明细详情表！ -->
    <el-dialog
      title="单条项目详情!"
      :visible.sync="showProjectDetail"
      width="80%"
    >

      <!--      底部区域 -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="showProjectDetail = false">取 消</el-button>
    <el-button type="primary" @click="showProjectDetail = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { listDetails, getDetails } from '@/api/system/details'
import axios from 'axios'

export default {
  name: 'Details',
  components: {},
  data() {
    return {
      projectDetailList: [],
      queryParams: {},
      dialogVisible: false,
      uploadFileURL:
        'http://192.168.1.105:8090/project/details/importProjectFile',
      loadFileParams: {
        projectNumber: '',
        projectName: '',
        projectHead: '',
        projectType: '',
        fileNames: ''
      },
      showProjectDetail: false,
      addForm: {},
      subTableData: [],
      headers: {
        Authorization: window.sessionStorage.getItem("myToken")
      }
    }
  },
  created() {
  },
  methods: {
    uploadSuccess(file) {
      console.log(file)
    },
    /** 查询项目信息列表 */
    getProjectDetail() {
      this.loading = true
      listDetails(this.queryParams).then((response) => {
        console.log(response)
        this.loadFileParams.projectNumber = response.rows[0].projectNumber
        this.loadFileParams.projectName = response.rows[0].projectName
        this.loadFileParams.projectHead = response.rows[0].projectHead
        this.loadFileParams.projectType = response.rows[0].projectType
        this.projectDetailList = response.rows
      })
    },
    handleUploadFiles(file, fileList) {
      console.log(file, fileList)
    },
    async handleRowClick(row, column, event) {
      let id = row.id
      const res = await getDetails(id)
      console.log(res)
      this.addForm = res.data
      this.subTableData = res.data.materialList
      this.showProjectDetail = true

      // this.$router.push({
      //   path: "/details/material",
      //   query: {
      //     id: row.id,
      //   },
      // });

    },
    uploadFileDialog() {
      this.dialogVisible = true
    },
    // 取消上传
    cancelUpload() {
      this.$refs.upload.clearFiles()
      this.dialogVisible = false
    },
    // 确认上传
    ConfirmUpload() {
      // this.$refs.upload.submit() // 上传文件操作
      this.$refs.upload.clearFiles()
      this.dialogVisible = false
    },
    DIYUploadFile(params) {
      // console.log(params)
      // const fileObj = params.file
      // 文件对象！
      let formData = new FormData()
      formData.append("file", this.loadFileParams.fileNames)
      formData.append("projectNumber", this.loadFileParams.projectNumber)
      formData.append("projectName", this.loadFileParams.projectName)
      formData.append("projectType", this.loadFileParams.projectType)
      formData.append("projectHead", this.loadFileParams.projectHead)
      this.$message.success("文件对象进来了！")

      axios({
        url: this.uploadFileURL,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: formData

      }).then(res => {
        console.log('尝试一下', res)
      })
    },
    uploadBefore(file) {
      this.loadFileParams.fileNames = file.name
    }
  }
}
</script>

<style>
.upload {
  margin-bottom: 10px;
}

</style>
